<template>
    <VueDragResize v-if="ready" :isActive="itemIsActive" :w="initWidth" :h="initHeight" :x="initX" :y="initY"
                   :z="zIndex" :parentScaleX="scale" :parentScaleY="scale" :class="drClassName"
                   v-on:resizing="handleResize" v-on:dragging="handleDrag">
        <jzl-page-item ref="jzlPageItem" class="ele-design-item jzl-page-item" :class="[{ 'active': isCurrent }]" :key="item.page_item_code"
                       @click.native.stop="handleClick" @mousemove.native="handleMouseOver"
                       @mouseenter.native.stop="handleMouseEnter" @mouseleave.native.stop="handleMouseLeave"
                       :item="item" :is-h5="isH5" :is-design="true" :page-type="pageType"
                       :current-item="currentItem" :current-el-code="currentElCode"
                       v-on="$listeners" v-bind="$attrs">
            <div slot="header" v-if="item.component === 'jzlPageSub'" class="ele-design-subpage-tag"></div>
            <template slot="box" v-if="item.component === 'jzlLayout'">
                <div v-if="!item.subs || item.subs.length <= 0" class="layout-empty-tip"></div>
                <template v-for="it in item.subs">
                    <builder-item-dr :item="it" :is-h5="isH5" :page-type="pageType" :items="item.subs" v-on="$listeners" v-bind="$attrs"
                                     :scale="scale" :current-item="currentItem" :current-el-code="currentElCode"></builder-item-dr>
                </template>
            </template>
        </jzl-page-item>
    </VueDragResize>
</template>

<script>
    import VueDragResize from "vue-drag-resize";
    import BuilderItem from "./builder-item";

    export default {
        name: 'BuilderItemDr',
        extends: BuilderItem,
        components: { VueDragResize },
        props: {
            scale: {
                type: Number,
                default: 1
            }
        },
        data() {
            return {
                initWidth: 200,
                initHeight: 0,
                initX: 0,
                initY: 0,
                zIndex: 0,
                ready: false
            }
        },
        computed: {
            itemIsActive() {
                let pic = _.get(this.item, "page_item_code");
                let cic = _.get(this.currentItem, "page_item_code");
                return cic && pic && cic === pic;
            },
            drClassName() {
                return `vdc-${ _.get(this.item, 'ele_style._node') }`
            }
        },
        watch: {
            "item.order"(val) {
                if(val >= 0) {
                    this.zIndex = val;
                }
            }
        },
        mounted() {
            this.initWH();
            this.ready = true;
        },
        methods: {
            initWH() {
                let width = _.get(this.item, "ele_style._ss.width")
                let height = _.get(this.item, "ele_style._ss.height")
                let x = _.get(this.item, "ele_style._ss.left")
                let y = _.get(this.item, "ele_style._ss.top")
                let order = _.get(this.item, "order")

                if(width) {
                    this.initWidth = width;
                }

                if(height) {
                    this.initHeight = height;
                }
                if(x) {
                    this.initX = x;
                }
                if(y) {
                    this.initY = y;
                }

                if(order) this.zIndex = order;
            },
            handleResize(info) {
                let width = _.get(info, "width");
                let height = _.get(info, "height");

                if(width) {
                    this.item.ele_style._ss.width = width;
                }
                if(height) {
                    this.item.ele_style._ss.height = height;
                }
            },
            handleDrag(info) {
                let left = _.get(info, "left");
                let top = _.get(info, "top");

                if(left) {
                    this.item.ele_style._ss.left = left;
                }
                if(top) {
                    this.item.ele_style._ss.top = top;
                }
            }
        }
    }
</script>
